<template>
  <div class="form_box">
    <el-form :model="dataForm" :rules="dataFormRules" ref="dataForm" label-width="100px" class="demo-ruleForm">

      <!-- n -->
      <el-form-item label="name" prop="name">
        <el-input v-model="dataForm.name"></el-input>
      </el-form-item>

      <el-form-item label="父模块" prop="pid">
        <ModuleSelect ref="moduleSelect" @onDataChanged="onModuleDataChanged"></ModuleSelect>
      </el-form-item>

      <el-form-item label="icon" prop="icon">
        <IconSelectGroup ref="IconSelect" @onDataChanged="onIconDataChanged"></IconSelectGroup>
      </el-form-item>

      <el-form-item label="链接">
        <el-input v-model="dataForm.url" style="width:400px" placeholder="/system/muser"></el-input>
      </el-form-item>

      <!-- 确认 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm()" :loading="loading">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

import { moduleAddApi } from '@/manager-core/api/module/module'
import {ModuleSelect} from '@/manager-core/component/select'
import {IconSelectGroup} from '@/manager-core/component/selectgroup'


export default defineComponent({
  name: 'ModuleAdd',

  components: {
    ModuleSelect,IconSelectGroup
  },

  data(){
    return {      
      dataForm : {
        pid: null,
        name: '',
        icon : '',
        url : '',
        hasChild : false,
        status : 0
      },
      dataFormRules: {
        name: [
          {required:true,message: '请输入name',trigger: 'blur'}
        ]
      },
      loading : false      
    }
  },

  methods:{
    init(){

    },

    onModuleDataChanged(val:any){
      this.dataForm.pid = val;  
    },

    onIconDataChanged(val:any){
      this.dataForm.icon = val;
    },

    submitForm(){
      (this.$refs['dataForm'] as any)
      .validate((valid:any)=>{
        if(valid){
          // 验证通过
          console.log("submitForm success")

          this.loading = true;

          moduleAddApi(this.dataForm)
            .then(()=>{
                ElMessage.success("创建成功！");

                this.reload();                
            })
            .finally(()=>{
              this.loading = false;
              (this.$refs['dataForm'] as any).resetFields();
            })


        }
        else{
          // 未验证通过
          ElMessage.error("未通过表单验证，请检查表单项");
        }
      })
    }
  },

  mounted(){
    console.log("muser")
  },

  setup(){
    const store = useStore()

    return {
      reload:()=> store.dispatch('managercore/menus/reload')
    }

  }


})



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
</style>
